<template>
  <div class="help-repayMsp">
    <HeaderTop title="Help"></HeaderTop>
    <div class="title">The Contract Number start with “MSP”</div>
    <div class="box">
      <div @click="goPage('/help/msp/repayml')" class="sort">M.Lhuillier</div>
      <div @click="goPage('/help/msp/repayrd')" class="sort">Rd Pawnshop</div>
      <div @click="goPage('/help/msp/repayecpay')" class="sort">7-11 or other stores with EC-pay(CLIQQ)</div>
      <div @click="goPage('/help/msp/repayapp')" class="sort">CLIQQ APP</div>
    </div>
  </div>
</template>

<script>
  import HeaderTop from '@/components/header-top'
  export default {
    name: 'help-repayMsp',
    components: {
      HeaderTop
    },
    data () {
      return {
      };
    },
    methods: {
      goPage(url) {
        this.$router.push(url)
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import '~@/assets/scss/function';

  [data-page=help-repayMsp] {
    body {
      background: #f8f8f8;
    }
    .help-repayMsp {
      color:#333333;
      padding: 180px 0 0 0;
      .title {
        font-size:32px;
        font-weight:bold;
        line-height:48px;
        text-align: center;
        padding:0 30px;
        margin: 0 auto 60px auto;
      }
      .box {
        width:690px;
        background:#FFF;
        border-radius:20px;
        font-size:32px;
        line-height:38px;
        margin:0 auto;
        padding:0 30px;
        .sort {
          padding: 40px 52px 40px 0;
          background: url('~@/assets/imgs/help/icon-right.png') no-repeat right center;
          background-size: 32px 32px;
          border-bottom:1px solid #EEEEEE;
        }
        .sort:last-child {
          border-bottom: none;
        }
      }
    }
  }
</style>
